<template>
  <div :class="switchValue == '' ? 'home_dark' : 'home_' + switchValue">
    <div class="second-page">
      <div class="wrap">
        <div class="header">
          <div class="title">成都市规划和国土资源办公门户-服务大厅</div>
          <div class="header-right-box">
            <div class="header-menu-box">
              <p
                @click="$router.push('/home')"
                style="
                  cursor: pointer;
                  color: rgba(0, 118, 255, 1);
                  font-weight: bold;
                "
              >
                主页
              </p>
              <div class="theme">
                <span>您好，{{ userInfo.userName }}</span>
                <span @click="logout">
                  <i class="el-icon-switch-button"></i>退出
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="banner">
        <div class="wrap">
          <div class="header-search-box">
            <el-input></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="wrap">
          <div class="crumbs-box">
            <p>
              系统导航> <span>{{ curNav }}</span>
            </p>
          </div>
          <el-row :gutter="20">
            <el-col :span="5">
              <!-- 知识库 -->
              <div class="module-box knowledge-box">
                <div class="module-title">
                  <p>知识库</p>
                </div>
                <div class="knowledge-list">
                  <div
                    :class="[
                      'knowledge-list-item',
                      curNav == '常见问题' ? 'cur-item' : '',
                    ]"
                    @click="changeCur('常见问题')"
                  >
                    <p>常见问题</p>
                  </div>
                  <div
                    :class="[
                      'knowledge-list-item',
                      curNav == '最新功能' ? 'cur-item' : '',
                    ]"
                    @click="changeCur('最新功能')"
                  >
                    <p>最新功能</p>
                  </div>
                  <div
                    :class="[
                      'knowledge-list-item',
                      curNav == '操作手册' ? 'cur-item' : '',
                    ]"
                    @click="changeCur('操作手册')"
                  >
                    <p>操作手册</p>
                  </div>
                </div>
              </div>
              <!-- 热门标签 -->
              <!-- <div class="module-box">
                <div class="module-title">
                  <p>热门标签</p>
                </div>
                <div class="rmbq-box">
                  <div class="rmbq-item" v-for="item in 10" :key="item">
                    <p>操作手册</p>
                  </div>
                </div>
              </div> -->
            </el-col>
            <el-col :span="19">
              <div class="content-module-box" v-if="detailsItem == null">
                <!-- 列表 -->
                <div
                  class="module-box serve-hotline-box"
                  v-if="curNav == '常见问题'"
                >
                  <div class="module-title">
                    <p>常见问题</p>
                  </div>
                  <div class="msg-val-box">
                    <div class="content-box">
                      <!-- <div class="content-val-title">
                      <p>常见问题</p>
                    </div> -->
                      <div class="content-val-box">
                        <div
                          class="content-val-item"
                          v-for="(item, index) in commonList"
                          :key="index"
                        >
                          <p @click="showDetails(item)">
                            {{ index + 1 }}、{{ item.TITLE }}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="module-box serve-hotline-box"
                  v-if="curNav == '最新功能'"
                >
                  <div class="module-title">
                    <p>最新功能</p>
                  </div>
                  <div class="msg-val-box">
                    <div class="content-box">
                      <!-- <div class="content-val-title">
                      <p>最新功能</p>
                    </div> -->
                      <div class="content-val-box">
                        <div
                          class="content-val-item"
                          v-for="(item, index) in newFnList"
                          :key="index"
                        >
                          <p @click="showDetails(item)">
                            {{ index + 1 }}、{{ item.TITLE }}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="module-box serve-hotline-box"
                  v-if="curNav == '操作手册'"
                >
                  <div class="module-title">
                    <p>操作手册</p>
                  </div>
                  <div class="msg-val-box">
                    <div class="content-box" style="display: flex">
                      <el-button
                        v-if="systemInfo.newSC && systemInfo.newSC.ID"
                        type="primary"
                        size="small"
                        icon="el-icon-download"
                        @click="downloadFile(systemInfo.newSC.ID)"
                        >最新手册</el-button
                      >
                      <template v-if="!showHistButton">
                        <el-button
                          v-show="
                            systemInfo.versionList &&
                            systemInfo.versionList.length > 0
                          "
                          type="info"
                          size="small"
                          icon="el-icon-view"
                          @click="showHistButton = true"
                          >历史版本</el-button
                        >
                      </template>
                      <template v-else>
                        <div
                          v-for="item in systemInfo.versionList"
                          :key="item.ID"
                          style="margin: 0 10px"
                        >
                          <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-download"
                            @click="downloadFile(item['ID'])"
                            >{{ item["VERSIONNAME"] }}</el-button
                          >
                        </div>
                        <el-button
                          v-show="systemInfo.versionList.length > 0"
                          type="info"
                          size="small"
                          icon="el-icon-view"
                          @click="showHistButton = false"
                          >收起</el-button
                        >
                      </template>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 问题详情 -->
              <div class="content-module-box" v-else>
                <serveDetails :detailsVal="detailsItem"></serveDetails>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <footerCom></footerCom>
    </div>
  </div>
</template>
<script>
import $ from "jquery"; //引入jquery，否则document.getElementById为null
import serveDetails from "../components/serveListDetails.vue";
import footerCom from "./footerCom.vue"
export default {
  components: { serveDetails,footerCom },
  data() {
    return {
      switchValue: "dark",
      userId: localStorage.getItem("USER_ID"),
      interfaceName: "antu.newportal-zjx.provider",
      userInfo: "",
      sysType: "",
      sysId: "",
      curNav: "常见问题",
      commonList: [],
      newFnList: [],
      detailsItem: null,
      systemInfo: {
        newSC: { ID: false },
      },
      showHistButton: false,
    };
  },
  methods: {
    // 显示详情
    showDetails(item) {
      console.log(item);
      this.detailsItem = item;
    },
    changeCur(navName) {
      this.curNav = navName;
      this.detailsItem = null;

      if (this.curNav == "常见问题") {
        //获取列表
        this.getCjwt();
      } else if (this.curNav == "最新功能") {
        //获取列表
        this.getCjwt();
      } else if (this.curNav == "操作手册") {
        //获取操作手册
        this.getCzsc();
      }
    },
    logout() {
      localStorage.removeItem("USER_ID");
      localStorage.removeItem("TOKEN");
      this.$router.push("/");
    },
    getUserInfo() {
      var that = this;
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserInfo",
          args: [localStorage.getItem("USER_ID")],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            response.result = JSON.parse(response.result);
            that.userInfo = response.result;
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    // 获取用户主题
    getUserStyle() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserStyle",
          args: [this.userId],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            if (response.result == "1") {
              this.switchValue = "light";
            } else {
              this.switchValue = "dark";
            }
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    // 获取常见问题列表
    getCjwt() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName:
            "antu.newportal-zjx.provider.helpcenter.HelpCenterProvider",
          methodName: "getGJWTById",
          args: [this.sysId],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            response.result = JSON.parse(response.result);

            this.commonList = response.result["常见问题"];

            this.commonList.map((item) => {
              item.CONTENT = unescape(item["CONTENT"]);
            });

            this.newFnList = response.result["最新功能"];

            this.newFnList.map((item) => {
              item.CONTENT = unescape(item["CONTENT"]);
            });
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    // 获取操作手册
    getCzsc() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName:
            "antu.newportal-zjx.provider.helpcenter.HelpCenterProvider",
          methodName: "getCZSCById",
          args: [this.sysId],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            response.result = JSON.parse(response.result);

            console.log("操作手册", response.result);

            this.systemInfo.newSC = response.result.zxsc;

            this.systemInfo.versionList = response.result.lsbbsc;
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    downloadFile(id) {
      window.open(
        "http://172.18.2.151:32001/helpcenter/HelpCenterProvider/getFileById/" +
          id
      );
    },
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {
    //   获取用户信息
    this.getUserInfo();
    // 获取用户所选主题
    this.getUserStyle();
  },
  beforeMount() {},
  mounted() {
    this.sysType = this.$route.query.type;
    this.sysId = this.$route.query.systemId;

    console.log(this.sysType, this.sysId);

    if (this.sysType == "czsc") {
      this.curNav = "操作手册";
    } else {
      this.curNav = "常见问题";
    }

    //获取常见问题
    this.getCjwt();

    //获取操作手册
    this.getCzsc();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="less" scoped>
@import "./css/light.less";
@import "./css/dark.less";

p {
  margin: 0;
  padding: 0;
}

.second-page {
  .content-module-box {
    width: 100%;
    min-height: 400px;
    background-color: #ffffff;

    .module-box {
      min-height: 400px;
    }
  }

  .wrap {
    width: 85%;
    margin: 0 auto;
  }

  .crumbs-box {
    font-weight: bold;
    padding: 0 0 20px;

    span {
      font-size: 16px;
      color: rgba(54, 112, 255, 1);
    }
  }

  .content {
    background: none;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 35px;
    padding: 0 !important;
    box-shadow: none;
    margin-left: 0;
  }

  .header-right-box {
    display: flex;
    align-items: center;
  }

  .header-menu-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    padding-right: 40px;

    p {
      color: rgba(67, 67, 67, 1);
      font-size: 14px;
    }
  }

  .header-search-box {
    width: 70%;
    max-width: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;

    & /deep/ .el-input__inner {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .banner {
    width: 100%;
    height: 161px;
    background-image: url("../assets/image/banner-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .banner .wrap {
    padding: 0 120px 0 145px;
    position: absolute;
    display: flex;
    height: 161px;
    // align-items: flex-end;
  }

  .banner-left-title {
    margin-left: 152px;
    width: 300px;
    height: 70px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    background-color: rgba(54, 112, 255, 1);
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;

    p {
      font-size: 28px;
      color: #ffffff;
      font-weight: bolder;
    }
  }

  .banner-right-crumbs {
    position: absolute;
    bottom: 0;
    left: 500px;
    color: #ffffff;
    z-index: 2;
  }

  .main .wrap {
    box-sizing: border-box;
    padding: 24px;
  }

  .module-box {
    background-color: #ffffff;
    padding: 20px 10px;
    margin-bottom: 24px;
    .module-title {
      font-size: 16px;
      color: #333333;
      border-bottom: 1px rgba(204, 204, 204, 0.4) solid;
      padding-left: 10px;

      p {
        display: inline-block;
        border-bottom: 2px rgba(170, 205, 244, 1) solid;
        padding: 5px 0;
        padding-bottom: 10px;
        font-weight: bold;
      }
    }
  }

  .rmbq-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0 0 0;

    .rmbq-item {
      width: 48%;
      font-size: 14px;
      color: #4f4f4f;
      box-sizing: border-box;
      padding: 5px;
      margin-bottom: 10px;
      background: #f0f7ff;
      text-align: center;
      border-radius: 5px;
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        background: rgba(54, 112, 255, 1);
        color: #ffffff;
      }
    }
  }

  .knowledge-list {
    width: 100%;

    .knowledge-list-item {
      text-align: left;
      padding: 10px 20px;
      border-radius: 5px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background-color: rgba(238, 243, 255, 0.5);
      }
    }

    .knowledge-list-item.cur-item {
      background-color: rgba(238, 243, 255, 1);
      color: rgba(68, 145, 232, 1);
    }
  }

  .msg-val-box {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .content-box {
      width: 90%;
      margin-bottom: 40px;
    }

    .content-val-title {
      padding: 10px 0;

      p {
        font-weight: bold;
        border-left: 5px rgba(68, 145, 232, 1) solid;
        padding-left: 10px;
      }
    }

    .content-val-box {
      padding: 10px 0;
    }

    .content-val-item {
      padding: 0 0 10px 0;
      transition: all 0.3s;
      color: rgba(79, 79, 79, 1);
      cursor: pointer;

      &:hover {
        color: rgba(68, 145, 232, 1);
      }

      p {
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>